<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { getToken } from "@/utils/auth";
import OSS from "ali-oss"
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
const props = defineProps({
    defaultValue:{
        type:String,
        default:''
    }
})
const emits = defineEmits(["changeHtml"]);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('');
watch(props,()=>{
    valueHtml.value = props.defaultValue;
},{
    immediate:true
})
watch(valueHtml,(newval)=>{
    emits('changeHtml',valueHtml.value)
})
const mode = ref('default');
const toolbarConfig = {
    excludeKeys:[
        'group-video',
        'group-image'
    ]
};
const uploadPercentage = ref(0);
const videoLoading = ref(false);
const baseUrl = import.meta.env.VITE_APP_UPLOADURL;
const editorConfig = { 
    placeholder: '请输入内容...',
    MENU_CONF:{
        uploadVideo:{
            server:baseUrl + '/gateway/file-server/file/uploadSingleVideo',
            // form-data fieldName ，默认值 'wangeditor-uploaded-video'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 500 * 1024 * 1024, // 500M

            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/mp4'],

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers:{
            'Authorization':`Bearer ${getToken()}`
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 30 秒
            timeout: 120 * 1000, // 15 秒
            // 自定义选择视频

            async customUpload(file, insertFn) {             // JS 语法
            videoLoading.value = true;
            let client = new OSS({
                // // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
                // region: "<Your region>",
                // // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
                // accessKeyId: "<Your AccessKeyId>",
                // accessKeySecret: "<Your AccessKeySecret>",
                // bucket: "Your bucket name",
                region: "oss-cn-hangzhou",
                // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
                accessKeyId: "LTAI5tBywHDSaqpsrjBVycnr",
                accessKeySecret: "Ffp2jJJIPqsDSGEmM3iMgtVJaxNCQJ",
                bucket: "jwkj-videos",
            });
            try {
                // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
                let nowDate = new Date().getTime();
                uploadPercentage.value = 0;
                let fileName = nowDate.toString() + (parseInt(Math.random()*10));
                client
                .multipartUpload(`${fileName}.mp4`, file, {
                    progress: function (p) {
                        let uploadPercentageValue = p * 100;

                        uploadPercentageValue = uploadPercentageValue.toFixed(2);
                        uploadPercentage.value = Number(uploadPercentageValue);
                    },
                    // headers: {
                    //   // 设置上传回调
                    //   "x-oss-callback": result.callback,
                    //   "x-oss-callback-var": result["callback-var"],
                    // },
                })
                .then((result) => {

                    const url =
                    result.res.requestUrls.length > 0
                        ? result.res.requestUrls[0].split("?")[0]
                        : "";
                    insertFn(url)
                    videoLoading.value = false;
                })
                .catch((err) => {
                    videoLoading.value = false;
                    console.log(err);
                    /**
                     * 设置本地上传失败的回调
                     */
                });
            } catch (e) {
                console.log(e);
            }

            }

        },
        uploadImage:{
            server:baseUrl + '/gateway/file-server/file/uploadOssFile',
            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers:{
            'Authorization':`Bearer ${getToken()}`
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, // 5 秒
            // 上传之前触发
            onBeforeUpload(file) {

                // file 选中的文件，格式如 { key: file }
                return file

                // 可以 return
                // 1. return file 或者 new 一个 file ，接下来将上传
                // 2. return false ，不上传这个 file
            },
            // 上传进度的回调函数
            onProgress(progress) {
                // progress 是 0-100 的数字
                console.log('progress', progress)
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {
                console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            onFailed(file, res) {
                console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
                console.log(`${file.name} 上传出错`, err, res)
            },
            customInsert(res, insertFn) {

            insertFn(res.data.fileUrl)
            },
        }
    }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const changeValueHtml = (value)=>{
    valueHtml.value = value;

}
const changeVal = (value)=>{
    console.log(value,222);

}
const format = (percentage) => (percentage === 100 ? '' : `已上传${ percentage }%，请等待...`)
defineExpose({changeValueHtml,valueHtml})
</script>
<template>
    <div style="border: 1px solid #ccc;" class="editor">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @change="changeVal"
        @onCreated="handleCreated"
      />
      <el-progress :percentage="uploadPercentage" class="video-progress"  striped striped-flow :format="format" v-if="videoLoading"/>
    </div>
</template>
<style lang="less" scoped>
.editor{
    position: relative;
}
.video-progress{
    position: absolute;
    bottom:20px;
    right:0;
    z-index: 99;
    width: 300px;
}
</style>